<template>
	<view class="storeCodeDetail">
		<view class="storeStep">
			<view class="stepItem" v-for="(item,index) in stepList">
				<view class="item_radius" :class="index<current?'light':''"></view>
				<view class="item_con">
					<view class="">{{item.title}}</view>
					<view class="item_con_reason">{{item.reason}}</view>
				</view>
				<view class="item_state">
					<button v-if="index==current" type="default" size="mini" plain="true" @click="navApplication">{{storeData.status==3?'查看':'修改'}}资料</button>
					<button v-else-if="index==2 && current==3" type="default" size="mini" plain="true" @click="navApplication">查看资料</button>
					<image v-else-if="index<current" src="../../static/img/process_ic_success.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepList:[{
					title:'支付宝校验信息',
					reason:''
				},{
					title:'商家确认开通',
					reason:''
				},{
					title:'BD上传物料',
					reason:''
				}],
				current:0, //当前流程
				storeData:'' //门店码详情数据
			}
		},
		onLoad:function(data){
			this.storeData = JSON.parse(data.detailData)
			console.log(this.storeData)
			this.dealData()
		},
		methods: {
			navApplication:function(){
				uni.navigateTo({
					url:`../storeCodeApplication/storeCodeApplication?status=${this.storeData.status}&merchant_id=${this.storeData.merchant_id}`
				})
			},
			dealData:function(){
				let status = this.storeData.status;
				if(status == 2){ //审核中
					this.current = 1;
				}else if(status == 3){ //审核成功
					if(!!this.storeData.imge_detail){
						this.current = 3;
					}else{
						this.current = 2;
					}
				}else{ //审核失败
					this.current = 0;
					this.stepList[0].reason = this.storeData.result_desc;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.storeCodeDetail{
		min-height: 100%;
		background-color: #F5F5F5;
		padding: 30rpx;
		.storeStep{
			background-color: #FFFFFF;
			border-radius: $uni-border-radius-base;
			padding: 30rpx;
			margin-bottom: 20rpx;
			.stepItem{
				display: flex;
				width: 100%;
				position: relative;
				&:nth-child(1){
					.item_radius{
						&::before{
							content: '';
							width: 0rpx;
							height: 0rpx;
						}
					}
				}
				&:nth-last-child(1){
					.item_radius{
						margin-bottom: 0;
					}
				}
				.item_radius{
					width: 38rpx;
					height: 38rpx;
					border-radius: 100%;
					border: 2rpx solid #CCCCCC;
					position: relative;
					margin-bottom: 98rpx;
					&::before{
						content: '';
						position: absolute;
						top: -100rpx;
						left: 16rpx;
						width: 2rpx;
						height: 100rpx;
						background-color: #CCCCCC;
					}
					&.light{
						border-color: #007AFF;
						&::before{
							background-color: #007AFF;
						}
					}
				}
				.item_con{
					padding-left: 30rpx;
					width: 100%;
					.item_con_reason{
						font-size: $uni-font-size-sm;
						color: #999999;
						width: 70%;
					}
				}
				.item_state{
					position: absolute;
					right: 0;
					top: 0;
					image{
						width: 40rpx;
						height: 40rpx;
					}
					button{
						font-size: $uni-font-size-sm;
						color: #007AFF;
						border: 1rpx solid #007AFF;
						border-radius: 30rpx;
						padding-left: 20rpx;
						padding-right: 20rpx;
					}
				}
			}
		}
	}
</style>
